<template>
    <div class="login" :class="{'bg':bg}">
        <div class="con" v-if="show">
            <div class="form">
                <div class="phone">
                    <span class="iconfont iconmy"></span>
                    <input type="text" v-model="user.phone" class="input" placeholder="输入手机号">
                </div>

                <div class="code">
                    <span class="iconfont iconmima"></span>
                    <input type="text" v-model="user.captcha" class="input" placeholder="输入验证码">
                    <div class="btn" @click="sendCode">
                        {{sec>0?sec:"获取验证码"}}
                    </div>
                </div>

                <div class="confirm" @click="confirm">
                    登录
                </div>

                <split-text class="split" text="其他登录方式"></split-text>


                <div class="icons">
                    <span class="iconfont iconweixin"></span>
                </div>

            </div>


        </div>
    </div>
</template>

<script>
    import {testLogin, wxLogin, getCodeUrl, phoneLogin} from "../../api/login";
    import {getLastPath, getToken, getTopUserId, setToken, setUserId, setLastPath} from "../../util/cookie";
    import {mapActions} from 'vuex'
    import {listCart} from "../../api/cart";
    import splitText from "@/components/base/split-text"
    import {getCode} from "@/api/user";
    import {isWx} from "../../util";
    import * as Toast from '@/toast'

    export default {
        methods: {
            loginSuccess(data){
                if(!data){
                    Toast.showError("登录失败!")
                }
                this.setToken(data.token)
                this.updateUser({userId: data.userId})
                this.loginInit()
                if(getLastPath()&&getLastPath().indexOf('login')<0){ //不是登录页面
                  this.$router.replace(getLastPath())
                }else {
                  this.$router.replace("/home")
                }

            },
            confirm() {
                if (!this.user.phone || this.user.phone.length < 11) {
                    Toast.showInfo("请填写正确的手机号!")
                }
                if (!this.user.captcha || this.user.captcha != this.captcha) {
                    Toast.showInfo("请填写正确验证码!")
                    return
                }
                //手机号登录
                phoneLogin(this.user.phone, this.user.captcha, this.topUserId,true,this.user.name,this.user.avatar,this.user.unionId,this.user.openId).then(res=>{
                    this.loginSuccess(res.data)
                })
            },
            sendCode() {
                if (this.sec > 0) {
                    return
                }
                if (!this.user.phone || this.user.phone.length < 11) {
                    Toast.showInfo("请填写正确的手机号!")
                    return;
                }
                getCode(this.user.phone).then(res => {
                    this.captcha = res.data
                })
                this.sec = 30
                this.it = setInterval(() => {

                    if (this.sec > 0) {
                        this.sec--
                    } else {
                        this.sec = 0
                        clearInterval(this.it)
                    }
                }, 1000)
            },
            loginInit() {
                listCart().then(res => {
                    let count = 0;

                    res.data.forEach(cart => {
                        count += cart.quantity
                    })
                    this.updateCartCount(count)
                })
            },
            ...mapActions([
                'updateCartCount',
                'setToken',
                'updateUser'
            ])
        },
        data() {
            return {
                sec: 0,
                captcha: null,
                show: false,
                code: null,
                user: {
                    topUserId: null,
                    register: null,
                    avatar: null,
                    name: null,
                    openId: null,
                    unionId: null,
                    phone: null,
                    captcha: null
                }
            }
        },
        components: {
            splitText
        },
        computed:{
            bg(){
                if(process.env.VUE_APP_NAME == 'wg'){
                    return true
                }else return false
            }
        },
        created() {
            // 开发
            if (process.env.NODE_ENV == "development") {


                  // let userId = 241468
                  // let userId = 0
                  // let userId = 36919

                let userId = 60362
               // let userId = 40037
               //  let userId = 223743
                // let userId = 61066
                // let userId = 37247

                //let userId = 37247

                // //模拟登录
                testLogin(userId).then(res => {
                    setUserId(userId)
                    this.setToken(res.data.token)
                    this.updateUser({userId:res.data.userId})
                    this.$router.replace(getLastPath())
                    this.loginInit()
                    // list()
                })
                return
            }
            this.user.topUserId = getTopUserId()
            if (isWx()) {//如果是微信平台
                //微信code
                this.code = this.$route.query.code
                if (!this.code) {//不存在去请求
                    getCodeUrl().then(res => {
                        // console.log(res)
                        window.location.href = res.data
                    })
                } else {
                    // if (topUserId) {//存在推荐人
                    wxLogin(this.code, this.user.topUserId, true).then(res => {
                        this.loginSuccess(res.data)
                    })
                    // } else {
                    //     console.log('没有推荐人!')
                    // }

                }
            } else {
                this.show = true
            }


        },
        name: "index"
    }
</script>

<style scoped lang="stylus">
    .bg
        background none!important
    .login
        height 100%
        background url("./bgimg.png") no-repeat $page-bg
        background-size 100% 100vh
        .con
            padding 10px
            padding-top 15px

            .form
                display flex
                flex-direction column
                align-items center
                background-color white
                padding 60px 27px

                .code, .phone
                    width 100%
                    margin-bottom 20px
                    border-bottom 1Px solid #DCDCDC
                    height 42px

                    .iconfont
                        font-size 20px
                        color #A1A1A1

                    .input
                        font-weight 300
                        margin-left 19px
                        color #A1A1A1
                        font-size 14px
                        outline none
                        border none

                .code
                    display flex
                    align-items center

                    .input
                        flex 1

                    .btn
                        margin-right 6px
                        flex 0 0 57px
                        height 25px
                        width 57px
                        text-align center
                        line-height 25px
                        font-size: 9px;
                        font-family: PingFang SC;
                        font-weight: 300;
                        color: rgba(247, 137, 94, 1);
                        border 1Px solid #F7895E
                        border-radius 5px
                        white-space nowrap

                .confirm
                    margin-top 33px
                    width 300px
                    height 45px
                    display flex
                    justify-content center
                    align-items center
                    font-size: 16px;
                    font-family: PingFang SC;
                    font-weight: 300;
                    border-radius 20px
                    background-color #F0C808
                    color: rgba(255, 255, 255, 1);

                .split
                    width 100%
                    margin-top 80px

                .icons
                    margin-top 38px

                    .iconfont
                        font-size 49px
                        color #28B836
</style>
